<template>
  <el-form class="main" label-width="100">
    <div class="header">
      <div class="headertitle">
        <div class="headertitleText">发货单号：{{ state.info.FhNo }}</div>
        <div class="headerTip" v-if="state.type == 1">草稿</div>
        <div class="headerTip headerTipSuccess" v-if="state.type == 2">
          待审核
        </div>
        <div class="headerTip headerTipSuccess" v-if="state.type == 3">
          审核通过
        </div>
      </div>
      <div class="headerRow">
        <div class="headerCol">
          <div class="headerLabel">合同单号：</div>
          <div class="headerValue link">JH2401878</div>
        </div>
        <div class="headerCol">
          <div class="headerLabel">客户：</div>
          <div class="headerValue">Glong italy srl</div>
        </div>
        <div class="headerCol">
          <div class="headerLabel">公司：</div>
          <div class="headerValue">君禾泵业股份有限公司</div>
        </div>
        <div class="headerCol"></div>
      </div>
      <div class="headerRow">
        <div class="headerCol">
          <div class="headerLabel">创建时间：</div>
          <div class="headerValue">2024-05-01 17:28</div>
        </div>
        <div class="headerCol">
          <div class="headerLabel">创建人员：</div>
          <div class="headerValue">孙向明</div>
        </div>
        <div class="headerCol">
          <div class="headerLabel">最后修改时间：</div>
          <div class="headerValue">2024-05-05 18:48</div>
        </div>
        <div class="headerCol">
          <div class="headerLabel">最后修改人员：</div>
          <div class="headerValue">李今颖</div>
        </div>
      </div>
    </div>
    <!-- 业务信息 -->
    <div class="contentInfo">
      <div class="title">业务信息</div>
      <div class="content">
        <el-descriptions
          class="descriptions"
          :column="4"
          size="default"
          border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 公司</div>
            </template>
            {{ state.info.CompanyName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 公司地址</div>
            </template>
            {{ state.info.CompanyAddress }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 客户</div>
            </template>
            {{ state.info.CustomName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 客户地址</div>
            </template>
            {{ state.info.CustomAddress }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 贸易条款</div>
            </template>
            {{ state.info.TradeTerms }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 运输方式</div>
            </template>
            {{ state.info.TransportMode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 运抵国</div>
            </template>
            {{ state.info.ArrivalCountry }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 目的港</div>
            </template>
            {{ state.info.DestPort }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 业务员</div>
            </template>
            {{ state.info.SalesMan }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 币种</div>
            </template>
            {{ state.info.Currency }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 预计出货时间</div>
            </template>
            {{ state.info.EstimatedShippingTime }}
          </el-descriptions-item>
          <el-descriptions-item v-if="state.type > 1">
            <template #label>
              <div class="cell-item"><span>*</span> 托运类型</div>
            </template>
            {{ state.info.ConsignmentType == "1" ? "整箱" : "拼箱" }}
            <span class="editbtn" @click="ConsignmentTypeOpen">编辑</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="height: 8px;"></div>
      <div class="title">收发通信息</div>
      <div class="content">
        <el-descriptions class="descriptions" :column="4" size="default" border>
          <!-- 收货人 -->
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 收货人</div>
            </template>
            {{ state.info.ConsigneeName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 收货人地址</div>
            </template>
            {{ state.info.ConsigneeAddress }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 收货人电话</div>
            </template>
            {{ state.info.ConsigneePhone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 收货人税号</div>
            </template>
            {{ state.info.ConsigneeTaxID }}
          </el-descriptions-item>
          <!-- 发货人 -->
          <template
            v-for="(item, index) in state.info.ShipperList"
            :key="index"
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <span>*</span> {{ "发货人" + (index + 1) }}
                </div>
              </template>
              {{ item.ShipperName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <span>*</span> {{ "收货人地址" + (index + 1) }}
                </div>
              </template>
              {{ item.ShipperAddress }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <span>*</span> {{ "收货人电话" + (index + 1) }}
                </div>
              </template>
              {{ item.ShipperPhone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <span>*</span> {{ "收货人税号" + (index + 1) }}
                </div>
              </template>
              {{ item.ShipperTaxID }}
            </el-descriptions-item>
          </template>
          <!-- 通知人 -->
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 通知人</div>
            </template>
            {{ state.info.NotifierName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 通知人地址</div>
            </template>
            {{ state.info.NotifierAddress }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 通知人电话</div>
            </template>
            {{ state.info.NotifierPhone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item"><span>*</span> 通知人税号</div>
            </template>
            {{ state.info.NotifierTaxID }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <!-- 商品清单 -->
    <div class="contentInfo">
      <div class="title">商品清单</div>
      <div class="content">
        <div class="table">
          <AppPageTable
            :isPagination="true"
            stripe
            :data="state.tableData.data"
            @change="getList"
            :height="0"
            :option="state.tableData.option"
            v-loading="state.tableLoading"
          >
            <el-table-column
              sortable
              prop="TaxID"
              label="税号"
              width="120"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.TaxID }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="Model"
              width="120"
              label="产品型号"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.Model }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="ProductCn"
              label="商品中文名"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.ProductCn }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="ProductEn"
              label="商品英文名"
              width="220"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.ProductEn }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="MeasurementUnit"
              label="计量单位"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.MeasurementUnit }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="Num"
              label="数量"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.Num }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="Price"
              label="单价"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.Price }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="AllPrice"
              label="总金额"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.AllPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="BoxNum"
              label="箱数"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.BoxNum }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="GrossWeight"
              label="毛重"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.GrossWeight }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="NetWeight"
              label="净重"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.NetWeight }}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="Volume"
              label="体积"
              width="140"
              showOverflowTooltip
            >
              <template #default="{ row }">
                <span>{{ row.Volume }}</span>
              </template>
            </el-table-column>
          </AppPageTable>
        </div>
      </div>
    </div>
  </el-form>

</template>
<script setup>
import { ref, toRef, reactive, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";

const Store = useStore();
const Route = useRoute();

const state = reactive({
  type: 1,
  info: {
    FhNo: "SA24050019",
    ConsignmentType: "1",
    ContractNo: "JH2401878",
    CompanyName: "君禾泵业股份有限公司",
    CompanyAddress: "SD240410+11",
    CustomName: "Glong italy srl",
    CustomAddress: "Glong italy srl",
    ExamineStatus: 1,
    TradeTerms: "外销促销订单",
    TransportMode: "水路运输",
    ArrivalCountry: "POLAND",
    DestPort: "NingBo",
    SalesMan: "admin",
    Currency: "RMB",
    EstimatedShippingTime: "2024-05-22 10:25:36",
    // 收发通
    ConsigneeName: "-", //收货人
    ConsigneeAddress: "-",
    ConsigneePhone: "-",
    ConsigneeTaxID: "-",

    ShipperList: [
      //发货人
      {
        ShipperName: "-",
        ShipperAddress: "-",
        ShipperPhone: "-",
        ShipperTaxID: "-",
      },
    ],

    NotifierName: "-", //通知人
    NotifierAddress: "-",
    NotifierPhone: "-",
    NotifierTaxID: "-",
  },

  tableData: {
    //商品清单table
    data: [
      {
        TaxID: "174784474",
        Model: "Q25014M",
        ProductCn: "潜水泵",
        ProductEn: "A batch of garden pump accessories",
        MeasurementUnit: "PSC",
        Num: "400",
        Price: "25",
        AllPrice: "10000",
        BoxNum: "10000",
        GrossWeight: "100",
        NetWeight: "80",
        Volume: "200",
      },
      {
        TaxID: "174784474",
        Model: "Q25014M",
        ProductCn: "潜水泵",
        ProductEn: "A batch of garden pump accessories",
        MeasurementUnit: "PSC",
        Num: "400",
        Price: "25",
        AllPrice: "10000",
        BoxNum: "10000",
        GrossWeight: "100",
        NetWeight: "80",
        Volume: "200",
      },
    ],
    option: useTableOption(),
  },
  tableLoading: false,
  // 商品信息
  createBillDialog: {
    show: false,
    query: {
      TaxID: "",
      Model: "",
      ProductCn: "",
      ProductEn: "",
      MeasurementUnit: "",
      Num: "",
      Price: "",
      AllPrice: "",
      BoxNum: "",
      GrossWeight: "",
      NetWeight: "",
      Volume: "",
    },
  },
  CTDialog: {
    show: false
  }
});
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
}
.handel {
  display: flex;
  width: 100%;
  height: 28px;
  border-radius: 2px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  padding: 4px 16px;

  .draft {
    display: flex;

    .draft-item {
      color: #409eff;
      margin-right: 24px;
      font-size: 12px;
      cursor: pointer;
    }
  }

  .draft-out {
    color: #409eff;
    cursor: pointer;
  }
}
.contentInfo {
  width: 100%;
  padding: 8px 12px;
  background-color: #ffffff;
  margin-top: 8px;
  border-radius: 2px;
  border: 1px solid #dcdcdc;

  .title {
    height: 22px;
    font-size: 14px;
    line-height: 22px;
    border-left: 2px solid #409eff;
    padding-left: 4px;
  }

  // :deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label){
  //   width: 14px!important;
  // }
}
.contentInfo2 {
  padding-right: 32px;
}
.nomargin {
  :deep(.el-form-item--small) {
    margin-bottom: 0;
  }
}
.content {
  width: 100%;
  background-color: #ffffff;
  margin-top: 8px;

  .descriptions {
    .cell-item {
      // position: relative;
      span {
        color: #ff0000;
      }
    }

    :deep(.el-descriptions__table){
      table-layout:fixed;
      word-break:break-all;
    }

    :deep(
        .el-descriptions__body
          .el-descriptions__table.is-bordered
          .el-descriptions__cell
      ) {
      width: 60px;
      font-weight: unset;
      font-size: 12px;
      padding: 7px 8px;
    }
    :deep(.noBglabel){
      background: transparent;
      border-left: none;
      border-bottom: none;
      border-right: none;
      &:last-child{
        border-right: 1px solid #ebeef5;
      }
    }

    :deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label){
      width: 25px!important;
    }
  }
}
.ShipperRow {
  position: relative;
}
.delIcon {
  position: absolute;
  top: 4px;
  right: -14px;
  cursor: pointer;
  i {
    color: #f56c6c;
    font-size: 14px;
  }
}
.btn {
  margin-bottom: 8px;
}
.form-container {
  // border: 1px solid #e8e8e8;
  padding: 6px 6px 6px 8px;
  background-color: #ffffff;

  :deep(.el-form-item--small .el-form-item__label) {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
  }

  :deep(.el-input--suffix .el-input__inner) {
    padding-right: 4px;
  }

  :deep(.el-form--inline .el-form-item) {
    display: flex;
    margin-right: 0;
  }

  :deep(.el-form-item--small.el-form-item) {
    margin-bottom: 8px;
  }
}
.header {
  border-radius: 2px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
  padding: 8px 12px;
  margin-bottom: 8px;

  .headertitle {
    display: flex;
    align-items: center;
    .headertitleText {
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0px;
    }
    .headerTip {
      border-radius: 2px;
      background: rgba(217, 217, 217, 0.1);
      border: 1px solid rgba(217, 217, 217, 1);
      padding: 2px 4px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      margin-left: 12px;
    }
    .headerTipSuccess {
      background: rgba(121, 180, 60, 0.06);
      border: 1px solid rgba(121, 180, 60, 1);
      color: rgba(121, 180, 60, 1);
    }
  }
}
.headerRow {
  margin-top: 8px;
  display: flex;
  .headerCol {
    flex: 1;
    display: flex;
    .headerLabel {
      color: rgba(0, 0, 0, 0.6);
      font-size: 12px;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: left;
      width: 85px;
    }
    .headerValue {
      color: rgba(0, 0, 0, 0.6);
      font-size: 12px;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: left;
      flex: 1;
    }
  }
}
.editbtn{
  color: #409eff;
  margin-left: 8px;
  cursor: pointer;
}
.link{
  color: #409eff!important;
}
</style>
